1
00:00:00,840 --> 00:00:03,880
Hello and welcome to this lecture.

2
00:00:04,140 --> 00:00:11,750
In this lecture we will be creating the structure for the clock using hastier mail.

3
00:00:13,830 --> 00:00:22,090
I am inside my projet directory and I caught the blank hastier mail file open.

4
00:00:22,230 --> 00:00:27,280
So this is where I will write the hastier mail to save time.

5
00:00:27,300 --> 00:00:31,950
I will be explaining the quote step by step.

6
00:00:32,140 --> 00:00:39,200
My badgerly written it and just going to paste it and explain each line of code.

7
00:00:39,300 --> 00:00:47,490
The very first line of code you have to specify on an historic mail document is the dog tag.

8
00:00:47,780 --> 00:00:54,250
So this is how you write a doctype left angle brackets as commissioner Mark and dog type and then hastier

9
00:00:54,490 --> 00:00:57,320
male dog type is not actually a tag.

10
00:00:57,340 --> 00:00:59,910
Its use is a declaration.

11
00:00:59,940 --> 00:01:08,730
It gives information to the Web browser that the page they are trying to view is sent hastier Mail 5

12
00:01:08,730 --> 00:01:15,260
document or it tells them to render it or displayed as a hasty Mail 5 document.

13
00:01:15,300 --> 00:01:23,730
That's what the doctype does very first line you write on a hasty e-mail document.

14
00:01:23,730 --> 00:01:29,710
I have copied in some more code from line to to line 9.

15
00:01:30,030 --> 00:01:38,100
So Line 2 basically is where the our chawl hastier mail starts from so any chord between the hastier

16
00:01:38,100 --> 00:01:41,860
meryll tag will be rendered as hastier mail.

17
00:01:41,890 --> 00:01:48,920
All right so within the hastier Montag this hastier mail here this is a pair and you can see more taxes

18
00:01:48,960 --> 00:01:49,790
are paid.

19
00:01:49,810 --> 00:01:53,360
He conceded doted on the line there and deducted on the line.

20
00:01:53,370 --> 00:02:01,110
He had to show you that the pairs do match and mozz close in tag's have a forward slash before the tag

21
00:02:01,170 --> 00:02:02,380
is closed.

22
00:02:02,550 --> 00:02:10,500
So the hastier mail here is a parent and it consists of the head and then the bodies so the body and

23
00:02:10,500 --> 00:02:13,850
the head board should children of the hated male.

24
00:02:14,040 --> 00:02:22,290
So this is a kind of proper hastier male document structure showing the parent child relationship.

25
00:02:22,380 --> 00:02:26,430
So inside your head said chant We are going to define some more tags.

26
00:02:26,610 --> 00:02:33,330
The head is usually for information and purposes you would not see the contents of the head when the

27
00:02:33,330 --> 00:02:34,800
page is displayed.

28
00:02:34,830 --> 00:02:40,180
The only content that is visible is the content between the body tags.

29
00:02:41,960 --> 00:02:50,400
I have copied in some old code from Lyme for here all the way to in it.

30
00:02:50,520 --> 00:02:56,680
So these medder tags are chewed ran off the head section.

31
00:02:56,840 --> 00:03:05,330
So amid our tags basically used to provide extra information for the document and usually consist of

32
00:03:05,420 --> 00:03:07,980
an attribute and then the value.

33
00:03:08,030 --> 00:03:09,780
So the Moved this.

34
00:03:09,830 --> 00:03:11,110
The collar here.

35
00:03:11,120 --> 00:03:19,040
The ones in green here there are the attributes in quotes are the values or attributes most always have

36
00:03:19,040 --> 00:03:22,250
their values enclosed inside quotes.

37
00:03:22,520 --> 00:03:33,740
So medder can't say it refers to the code the Unicode or the type of characters that the application

38
00:03:33,740 --> 00:03:34,480
will use.

39
00:03:34,480 --> 00:03:41,480
He's telling the other web browser that you were using utf Dash 8 which is the standard Unicode.

40
00:03:41,480 --> 00:03:50,390
So most characters are able to be read using the utf Dash 8 that you can read more about if you want

41
00:03:51,410 --> 00:03:58,160
met and then that is a name you just gave the description you can provide enough information here to

42
00:03:58,160 --> 00:03:59,990
reflect the application.

43
00:03:59,990 --> 00:04:04,790
This is useful for search engines when they are looking for information.

44
00:04:04,790 --> 00:04:13,060
They usually come to the header section and pick out what's there and serve for the search results.

45
00:04:13,070 --> 00:04:17,230
This online seeks here the Met name viewport.

46
00:04:17,240 --> 00:04:25,230
This enables this page to be viewed by any device regardless of the screen size.

47
00:04:25,250 --> 00:04:30,440
This initial skill one here is a zaun Facility soufian a little device.

48
00:04:30,460 --> 00:04:35,240
It can allow you to zoom in and zoom out as you require.

49
00:04:35,310 --> 00:04:44,660
So what this does onli six is bisley to enable the content of the page to be viewed on any device regardless

50
00:04:44,720 --> 00:04:46,570
of the screen size.

51
00:04:46,610 --> 00:04:51,760
Line 7 is a title so I'm just Kimberlin a title line.

52
00:04:51,800 --> 00:04:59,030
It is a reference to the it we are going to use to foul the clock.

53
00:04:59,120 --> 00:05:01,100
So this is an Excel moustachioed.

54
00:05:01,160 --> 00:05:06,060
This is just a reference to it.

55
00:05:06,230 --> 00:05:14,700
I have added some more code here from line 11 to 13 line 11.

56
00:05:14,720 --> 00:05:22,220
Basically said Dave have created a div that will use to then close our digital clock.

57
00:05:22,280 --> 00:05:31,340
Give in to the Deven eidy attributes and the value of banner an attached span element span.

58
00:05:31,340 --> 00:05:36,980
Basically is can be used to join text together so that they appear as one.

59
00:05:37,070 --> 00:05:42,310
So this is a separate element which have nested inside the dates.

60
00:05:42,320 --> 00:05:47,290
Notice that its span is closed before the dph case for his code.

61
00:05:47,280 --> 00:05:55,060
Next in line 12 here created another day called Click clock.

62
00:05:55,280 --> 00:06:02,560
Sorry line 11 is just a the header just like a banner for the clock.

63
00:06:02,560 --> 00:06:10,610
Now say your time is X Y Z and then the actual interface for the clock is defined in the deef online

64
00:06:10,640 --> 00:06:14,380
12 and I've given it a idea of clock.

65
00:06:14,510 --> 00:06:21,080
So when you are creating idees best to name them appropriately.

66
00:06:21,110 --> 00:06:31,990
These are unique to a page while a class can be reused through a team have attached a script link and

67
00:06:32,180 --> 00:06:34,460
a source to where the script is.

68
00:06:34,940 --> 00:06:39,340
So basically the javascript will going to be using 4 to display the clock.

69
00:06:39,530 --> 00:06:43,960
This is the link that will reference the Java Script.

70
00:06:43,970 --> 00:06:45,190
This is where it is.

71
00:06:45,200 --> 00:06:52,730
It's inside the same directory as this source is clock dodgy which is in the same Projekt directory

72
00:06:53,270 --> 00:06:57,560
so that is it for the structure.

73
00:06:57,640 --> 00:07:07,890
So if I save this upward trend line page we will not see anything at the moment because this timing

74
00:07:07,970 --> 00:07:09,430
is not in place.

75
00:07:10,100 --> 00:07:12,600
So this is what the page looks like at the moment.

76
00:07:12,740 --> 00:07:16,550
You can see is did text there says your local time.

77
00:07:16,580 --> 00:07:22,700
So this is what eventually will be shown for the banner and then the time will be.

78
00:07:22,700 --> 00:07:25,070
The clock will be displayed on that date.

79
00:07:25,240 --> 00:07:30,640
So in when we do this he says the structure will be more pronounced.

80
00:07:30,860 --> 00:07:36,630
That's it for this lecture on creating a structure for a digital clock.

81
00:07:36,770 --> 00:07:37,880
Thanks for watching.

82
00:07:37,880 --> 00:07:38,950
Bye for now.